<!doctype html>

<html lang="en">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="../../../node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">

    <style>

        html, body {
            height: 100%;
        }
        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .capture-form {
            width: 100%;
            max-width: 500px;
            padding: 15px 15px 30px;
            margin: auto;
        }

        .url-box {
            margin-bottom: 10px;
        }

        .banner i {
            font-size: 65px;
        }

        .banner {
            margin-bottom: 10px;
        }


    </style>

    <!--https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/-->

</head>

<body class="text-center">

<div id="app" class="container-fluid">

    <form id="url-form" class="capture-form">

        <div class="url-wrapper">

            <div class="banner">
                <i class="fa fa-code"></i>
            </div>

            <h1 class="h3 mb-3 font-weight-normal">Capture Web Page</h1>

            <p>
                Capture a web page and store it locally for annotation.
            </p>

            <!--<div class="url-box">-->
                <!--<input type="url" id="url" title="URL" class="form-control" required autofocus placeholder="Enter URL">-->
            <!--</div>-->

            <div class="url-box">

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon-link"><i class="fa fa-link"></i></span>
                </div>
                <input type="url" id="url" class="form-control" placeholder="Enter URL" aria-label="Enter URL" aria-describedby="basic-addon-link" required autofocus>
            </div>


            </div>

            <div>
                <input type="submit" class="btn btn-primary btn-lg btn-block" value="Start capture">
            </div>

        </div>

    </form>

    <!--<form class="form-signin">-->
        <!--<img class="mb-4" src="../../assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">-->
        <!--<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>-->
        <!--<label for="inputEmail" class="sr-only">Email address</label>-->
        <!--<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>-->
        <!--<label for="inputPassword" class="sr-only">Password</label>-->
        <!--<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>-->
        <!--<div class="checkbox mb-3">-->
            <!--<label>-->
                <!--<input type="checkbox" value="remember-me"> Remember me-->
            <!--</label>-->
        <!--</div>-->
        <!--<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>-->
        <!--<p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>-->
    <!--</form>-->


</div>

<script>
    require('polar-loader').load("./js/entry.js");
</script>


</body>
</html>
